<template>
    <div class="content">
        <div class="left-section">
            <!-- 物种统计 -->
            <GenusStatistics />
            <!-- 物种趋势 -->
            <GenusTrend />
            <!-- 物候期统计 -->
            <PhenologicalPeriodStatistics />
        </div>
        <div class="center-section">
            <img src="@/assets/img/ledgend1.png" class="ledgend-img">
            <Center />
        </div>
        <div class="search-container">
            <el-input
                    @keyup.enter.native="getData"
                    placeholder="请输入物种名称"
                    suffix-icon="el-icon-search"
                    v-model="speciesName">
            </el-input>
            <el-select
                    v-model="phenologicalPeriod"
                    clearable
                    placeholder="请选择物候期"
                    @change="getData"
            >
                <el-option
                        v-for="item in phenologicalPeriodOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="right-section">
            <SpeciesIntroduction />
            <SpeciesObservationRecord />
            <SpeciesObservationDetail />
        </div>
    </div>
</template>

<script>
import GenusStatistics from '@/components/HabitatObservation/GenusStatistics.vue'
import GenusTrend from '@/components/HabitatObservation/GenusTrend.vue'
import PhenologicalPeriodStatistics from '@/components/HabitatObservation/PhenologicalPeriodStatistics.vue'
import SpeciesIntroduction from '@/components/HabitatObservation/SpeciesByObserver.vue'
import SpeciesObservationRecord from '@/components/HabitatObservation/SpeciesObservationResult.vue'
import SpeciesObservationDetail from '@/components/HabitatObservation/SpeciesObservationDetail.vue'
import Center from '@/components/HabitatObservation/Center.vue'
import {EventBus} from "../utils/event-bus";
export default {
  components: {
    GenusStatistics,
    GenusTrend,
    PhenologicalPeriodStatistics,
    SpeciesIntroduction,
    SpeciesObservationRecord,
    SpeciesObservationDetail,
    Center
  },
    mounted() {
        this.getData()
    },
    methods:{
        getData(){
            this.$api.patrol.groupByTag(this.phenologicalPeriod,this.speciesName).then(res => {
                this.speciesList=[];
                if(res&&res.length>0){
                    this.speciesList = res.map(item => (
                        {
                            ...item,
                            lonGd:item.longitude,
                            latGd:item.latitude,
                            localName:item.plantName,
                            icon: require(`@/assets/img/plant.png`)
                        }
                    ));
                }
                EventBus.$emit('set-markers-without-title', this.speciesList);
                EventBus.$emit('sent-registration', this.speciesList[0]);
            });
        },
    },
    data() {
        return {
            speciesList:[],
            speciesName: '',
            categories: ['萌芽期', '展叶期', '抽条期', '花芽期', '始花期', '盛花期', '末花期', '果实期', '叶变色期', '叶脱落期', '枯萎休眠期'],

            phenologicalPeriodOptions: [
                {
                    value: '萌芽期',
                    label: '萌芽期'
                }, {
                    value: '展叶期',
                    label: '展叶期'
                }, {
                    value: '抽条期',
                    label: '抽条期'
                }, {
                    value: '花芽期',
                    label: '花芽期'
                }, {
                    value: '始花期',
                    label: '始花期'
                }, {
                    value: '盛花期',
                    label: '盛花期'
                }, {
                    value: '末花期',
                    label: '末花期'
                }, {
                    value: '果实期',
                    label: '果实期'
                }, {
                    value: '叶变色期',
                    label: '叶变色期'
                }, {
                    value: '叶脱落期',
                    label: '叶脱落期'
                }, {
                    value: '枯萎休眠期',
                    label: '枯萎休眠期'
                }
            ],
            phenologicalPeriod: ''
        }
    }
}
</script>
<style lang="scss" scoped>
::v-deep .el-input {
  width: 120px;
  
  .el-input__inner {
    height: 24px;
    line-height: 24px;
    background: rgba(0, 150, 255, 0.2);
    border-color: #19DCFF;
    color: #19DCFF;
    font-size: 12px;
    border-radius: 0;
  }

  .el-input__icon {
    line-height: 24px;
    color: #19DCFF;
  }
}

::v-deep .el-select {
  width: 120px;

  .el-input__inner {
    height: 24px;
    line-height: 24px;
    background: rgba(0, 150, 255, 0.2);
    border-color: #19DCFF;
    color: #19DCFF;
    font-size: 12px;
    border-radius: 0;
  }

  .el-input__icon {
    line-height: 24px;
    color: #19DCFF;
  }
}
.search-container {
  position: absolute;
  top: 45px;
  right: 20px;
  display: flex;
    pointer-events: auto;
  justify-content: flex-end;
  margin-bottom: 10px;
  z-index: 100000;
  gap: 10px;
}

.ledgend-img {
  position: absolute;
  bottom: 72px;
  right: 37px;
}
</style>
<style lang="scss">

.el-select-dropdown.el-popper {
    border-radius: 0;
    margin-top: 0;
    margin-bottom: 0;
    background: rgba(0, 50, 125, 0.3);
    border: 1px solid rgba(7, 255, 229, 0.3);
   
    .el-select-dropdown__wrap{
        margin-bottom: -21px!important;
        margin-top: -7px!important;
    }
    .el-select-dropdown__item {
        color: #07FFE5;
        border-bottom: 1px solid rgba(7, 255, 229, 0.3);
        height: 24px;
        line-height: 24px;
        padding: 0;
        font-size: 12px;
        text-align: center;
        
        &:last-child {
            border-bottom: none;
            height: 24px;
            line-height: 24px;
        }
        
        &.selected, &.hover {
            color: #07FFE5;
            background: rgba(7, 255, 229, 0.1);
        }
    }

    .popper__arrow {
        display: none;
    }
}
</style>